<template>
  <div class="container">

    <user-Info :userInfo='localUserInfo' :noteNum='lists.length' />
    
    <div class="tags" v-if='lists.length'>
        <tag  @del='delTag' @tap='into' v-for='(item, index) of lists' :tagData='item' :key='index' />
    </div>

    <div class='empty-info' v-else>
      没有新的标签
    </div>
    
  
    
  </div>
</template>

<script>
import card from '@/components/card'
import {mapState, mapActions} from 'Vuex'
import userInfo from '@/components/userInfo.vue'
import tag from '@/components/tag.vue'

export default {
  data () {
    return {
      lists: []
    }
  },

  components:{
    userInfo,
    tag,
  },
  
  computed:{
    ...mapState(['localUserInfo']),
    ...mapState('http', ['initStatus']),
    
  },

  methods: {

    ...mapActions('http', ['getLists', 'deleteTag']),

    into(id){
      wx.navigateTo({
        url: `/pages/tagContent/main?id=${id}`
      })
    },

    async delTag(id){

      let isSuccess = await this.deleteTag(id);

      if(isSuccess){
        this.lists = this.lists.filter(item =>{
            return item.id !== id;
        })
      }else{
        wx.showModal({
          title: '无法删除，请检查网络是否可用',
          showCancel: false
        })
      }
      
      
    },

    async init(time,count = 0){
      let _this = this;

      clearTimeout(time);
      if(count > 30){return};
      if(!this.initStatus){
        time = setTimeout(() =>{
          _this.init(time, count+1);
        }, 100)

        return
      }

      this.lists = await this.getLists()
    }
    
  },
  

  async onShow(){
    await this.init()
  }


}
</script>

<style scoped lang='less'>

.tags{
  padding: 3*@interval;
  transition: all .5s;
}

.empty-info{
  @size: 200rpx;
  height: @size;
  box-sizing: border-box;
  text-align: center;
  line-height: @size;
}
</style>
